<template>
    <div class="cont">
        <div class="center">
            <h2>用户登录</h2>
            <div class="form-cont">
                <el-form label-position="right" label-width=".5208rem" v-model="formLabelAlign">
                    <el-form-item label="用户名">
                        <el-input v-model="formLabelAlign.account" placeholder="请输入用户名" />
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="formLabelAlign.password" placeholder="请输入密码" type="password" />
                    </el-form-item>
                    <el-form-item>
                        <template #default>
                            <div class="btn">
                                <el-button type="primary" @click="onSubmit">确认</el-button>
                            </div>
                        </template>
                    </el-form-item>
                </el-form>
            </div>

        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useUser } from '../store/user'
import { encrypt, decrypt } from "../utils/jsencrypt";
const formLabelAlign = reactive({
    account: '',
    password: '',

})
// 获取状态机
const user = useUser()
const onSubmit = () => {
    user.userLoginAct(formLabelAlign)
}

</script>

<style lang="scss" scoped>
div.cont {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - .9063rem);

    >div.center {
        width: 4.1667rem;
        height: 2.6042rem;
        background: #FFFFFF;
        border-radius: .0521rem;
        padding-top: .3646rem;
        display: flex;
        flex-direction: column;
        align-items: center;

        >h2 {
            font-size: .125rem;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #333333;
            line-height: .0938rem;
            margin-bottom: .2083rem;
        }

        >.form-cont {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: .1667rem;
        }

        .el-form-item {
            height: .3125rem;
            align-items: center;
            justify-content: end;
        }

        .btn {
            display: flex;
            justify-content: end;
            margin-bottom: .1563rem;
            margin-top: 40px;

            .el-button {
                width: 2.0833rem;
                height: .2813rem;
                background: #3F7233;
                border-radius: .0208rem;
                font-size: .0938rem;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #FFFFFF;
                line-height: .0938rem;
                border: 0;
            }
        }

    }
}
</style>

<style lang="scss">
div.form-cont {
    .el-form-item__label {
        font-size: .0833rem;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        margin-right: .1042rem;
    }

    .el-input {
        width: 2.0833rem;
        height: .3125rem;
        background: #F8F8F8;
        border-radius: .0208rem;
    }

    .el-input__wrapper {
        width: 2.0833rem;
        height: .3125rem;
        background-color: #F8F8F8;
        padding: 0 .1563rem;
    }

    .el-input__inner {
        font-size: .0938rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: .0885rem;
        color: black;
    }

    .el-form-item__content {
        flex: 0;
        min-width: 2.0833rem;
    }
}
</style>